<template>
    <div class="right1">
        <p class="p1">
            应用信息
        </p>
        <p>
            通过应用程序仪表板进行更多设置
        </p>
        <p>
            使用我们高级网络应用程序仪表板探索更多配置选项并自定义您的首选项，通过我们的仪表板掌控并充分利用您的应用程序，单击下面的链接管理您的所有需求。
        </p>
        <el-button type="primary" >Koto.app.com</el-button>
        <p>应用程序版本</p>
        <p>
            版本：1.0.0
        </p>
        <div v-for="(item, index) in info" :key="index">
            <p class="p2">
                <span>{{ item.title }}</span>
                <span class="span2" @click="changeVisible(index, item.flag)">{{ item.flag ? '十' : '一' }}</span>
            </p>
            <p class="p3" v-if="item.flag">{{ item.content }}</p>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from "vue";
const visible = ref(null);
const info = reactive([
    {
        title: '检查更新 ',
        content: 'POS应用程序是设计用于管理销售、处理付款、跟踪库存以及处理销售点系统的各种操作（例如订单管理和报告）的软件',
        flag: false
    },
    {
        title: '变更日志',
        content: 'POS应用程序是设计用于管理销售、处理付款、跟踪库存以及处理销售点系统的各种操作（例如订单管理和报告）的软件',
        flag: false
    },
    {
        title: '特征',
        content: 'POS应用程序是设计用于管理销售、处理付款、跟踪库存以及处理销售点系统的各种操作（例如订单管理和报告）的软件',
        flag: false
    },
    {
        title: '反馈',
        content: 'POS应用程序是设计用于管理销售、处理付款、跟踪库存以及处理销售点系统的各种操作（例如订单管理和报告）的软件',
        flag: false
    },
    {
        title: '评价我们',
        content: 'POS应用程序是设计用于管理销售、处理付款、跟踪库存以及处理销售点系统的各种操作（例如订单管理和报告）的软件',
        flag: false
    },
])
const changeVisible = (e, flag) => {
    console.log(e, flag);
    visible.value = e
    info.forEach(ele => {
        ele.flag = false
    })
    info[e].flag = !flag

}
</script>
<style scoped>
.right1 {
    width: 100%;
    min-height: 40vh;
    background-color: #fff;
    border-radius: 2vh;
    padding-left: 2.5vh;
    padding-right: 2.5vh;
    padding-top: 3.5vh;
    padding-bottom: 2.5vh;
    box-sizing: border-box;
    .p1 {
        font-size: 3vh;
        padding: 1.5vh;
        font-weight: 600;
        box-sizing: border-box;
    }
    p{
        font-size: 2vh;
        margin: 2vh 0;
    }
    .el-button{
        width: 10vh;
        height: 4vh;
    }
    .p2 {
        font-size: 2vh;
        display: flex;
        justify-content: space-between;

        .span2 {
            font-size: 2vh;
        }
    }

    .p3 {
        font-size: 1.5vh;
        padding-left: 1.5vh;
        padding-right: 1.5vh;
        color: #636566;

    }
}    
</style>